<template>
  <div class="dashboard">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stat-cards">
      <el-col :xs="24" :sm="12" :lg="6" v-for="stat in statsData" :key="stat.key">
        <el-card class="stat-card" :class="`stat-${stat.type}`">
          <div class="stat-header">
            <div class="stat-icon">{{ stat.icon }}</div>
            <el-tag :type="stat.trend > 0 ? 'success' : 'danger'" size="small" effect="plain">
              {{ stat.trend > 0 ? '+' : '' }}{{ stat.trend }}%
            </el-tag>
          </div>
          <div class="stat-body">
            <div class="stat-value">{{ stat.value.toLocaleString() }}</div>
            <div class="stat-label">{{ stat.label }}</div>
            <div class="stat-desc">{{ stat.desc }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="24">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-header">
              <span class="chart-title">用户活跃度趋势</span>
              <el-radio-group v-model="chartPeriod" size="small">
                <el-radio-button label="7">7天</el-radio-button>
                <el-radio-button label="30">30天</el-radio-button>
                <el-radio-button label="90">90天</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div ref="activityChart" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card">
          <template #header>
            <span class="chart-title">知识点完成率 TOP 10</span>
          </template>
          <div ref="knowledgeChart" class="chart-container"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card">
          <template #header>
            <span class="chart-title">PK胜率分布</span>
          </template>
          <div ref="pkChart" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, watch } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

// 响应式数据
const chartPeriod = ref('7')

// 统计数据
const statsData = reactive([
  {
    key: 'users',
    type: 'primary',
    icon: '👥',
    label: '总用户数',
    value: 12547,
    trend: 12,
    desc: '较上月增长 1,423 位'
  },
  {
    key: 'questions',
    type: 'success',
    icon: '📝',
    label: '题库总数',
    value: 8329,
    trend: 8,
    desc: '本月新增 623 道'
  },
  {
    key: 'pk',
    type: 'warning',
    icon: '⚔️',
    label: '今日PK场次',
    value: 1256,
    trend: 25,
    desc: '活跃度历史新高'
  },
  {
    key: 'topics',
    type: 'danger',
    icon: '💬',
    label: '活跃话题数',
    value: 453,
    trend: -3,
    desc: '需要增加运营活动'
  }
])

// 图表实例
let activityChartInstance = null
let knowledgeChartInstance = null
let pkChartInstance = null

// 图表引用
const activityChart = ref(null)
const knowledgeChart = ref(null)
const pkChart = ref(null)

// 初始化图表
const initCharts = () => {
  // 活跃度趋势图
  if (activityChart.value) {
    activityChartInstance = echarts.init(activityChart.value)
    const option = {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '活跃用户',
        type: 'line',
        smooth: true,
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(99, 102, 241, 0.3)'
            }, {
              offset: 1, color: 'rgba(99, 102, 241, 0.05)'
            }]
          }
        },
        emphasis: {
          focus: 'series'
        },
        lineStyle: {
          color: '#6366f1',
          width: 2
        },
        itemStyle: {
          color: '#6366f1'
        },
        data: [3200, 3800, 3500, 4200, 4800, 5200, 4500]
      }]
    }
    activityChartInstance.setOption(option)
  }

  // 知识点完成率图表
  if (knowledgeChart.value) {
    knowledgeChartInstance = echarts.init(knowledgeChart.value)
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['Java基础', 'Spring', 'MySQL', 'Redis', 'Vue3']
      },
      yAxis: {
        type: 'value',
        max: 100
      },
      series: [{
        name: '完成率',
        type: 'bar',
        barWidth: '60%',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#6366f1'
            }, {
              offset: 1, color: '#a78bfa'
            }]
          },
          borderRadius: [8, 8, 0, 0]
        },
        data: [95, 88, 82, 75, 70]
      }]
    }
    knowledgeChartInstance.setOption(option)
  }

  // PK胜率分布图表
  if (pkChart.value) {
    pkChartInstance = echarts.init(pkChart.value)
    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        bottom: '5%',
        left: 'center'
      },
      series: [{
        name: 'PK结果',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 65, name: '胜利', itemStyle: { color: '#10b981' } },
          { value: 25, name: '失败', itemStyle: { color: '#ef4444' } },
          { value: 10, name: '平局', itemStyle: { color: '#f59e0b' } }
        ]
      }]
    }
    pkChartInstance.setOption(option)
  }
}

// 监听图表周期变化
watch(chartPeriod, (newVal) => {
  ElMessage.info(`切换到${newVal}天数据`)
  // 这里可以根据新的周期重新加载数据
})

// 生命周期
onMounted(() => {
  nextTick(() => {
    initCharts()
  })

  // 监听窗口变化
  window.addEventListener('resize', () => {
    activityChartInstance?.resize()
    knowledgeChartInstance?.resize()
    pkChartInstance?.resize()
  })
})
</script>

<style scoped>
.dashboard {
  padding: 0;
}

/* 统计卡片样式 */
.stat-cards {
  margin-bottom: 20px;
}

.stat-card {
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
}

.stat-primary::before {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

.stat-success::before {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.stat-warning::before {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.stat-danger::before {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
}

.stat-body {
  margin-top: 10px;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 5px;
}

.stat-label {
  color: #64748b;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.stat-desc {
  color: #94a3b8;
  font-size: 0.85rem;
}

/* 图表样式 */
.chart-row {
  margin-bottom: 20px;
}

.chart-card {
  height: 100%;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
}

.chart-container {
  height: 350px;
}

@media (max-width: 768px) {
  .stat-cards .el-col {
    margin-bottom: 15px;
  }

  .chart-container {
    height: 250px;
  }
}
</style>